<template>
	<page-meta :root-font-size="getRootFontSize()"></page-meta>
	<view>
		<view style="width: 100%; height: 100vh; overflow: hidden;">
			<image style="width: 100%; height: 100%; transform: scale(1.5);" mode="scaleToFill" src="/static/icon/AboutUs/2x/homeImg.png"></image>
		</view>
		<view class="modifyMMBox">
			<view class="topBox">
				<view class="status_bar"></view>
				<uni-nav-bar
					style="width: 750rpx; height: 44px;"
					color="#9F9F9F"
					backgroundColor="rgba(0,0,0,0)"
					:border="false"
					:shadow="false"
					@clickLeft="gaoback"
					@clickRight="showSetUp"
				>
					<!-- <view class="titleImg"><image style="width: 100%; height: 100%;" mode="scaleToFill" src="/static/icon/logo_ctw@3x.png"></image></view> -->
					<view slot="left">
						<view class="leftIconBox"><uni-icons type="arrowleft" color="#333" size="18"></uni-icons></view>
					</view>
					<view slot="right"><uni-icons type="bars" color="#fff" size="28"></uni-icons></view>
				</uni-nav-bar>
			</view>
			<view class="zhuti" :style="{ marginTop: topBar }">
				<!-- 标题 -->
				<view class="titleBox">
					<view class="titleBoxcenter">
						<text>{{ i18n.ctwfont8 }}</text>
					</view>
				</view>
				<view class="tishiTitle">
					<view class="">{{ i18n.ctwfont59 }}</view>
				</view>
				<uni-forms v-if="langShow" :modelValue="formList" ref="form" :rules="rules" validateTrigger="bind">
					<uni-forms-item label=" " :labelWidth="30" name="password" class="formItemBox">
						<!-- i18n.ctwfont63 -->
						<template #left>
							<uni-icons size="24" type="locked-filled" style="padding-left: 5px; line-height: 40px; height: 40px;" color="#F77687" />
						</template>
						<input
							type="text"
							:maxlength="28"
							:password="YXeyeShow"
							class="classInput"
							:placeholder="i18n.ctwfont64"
							v-model="formList.password"
							@input="binddata('password', $event.detail.value)"
						/>
					</uni-forms-item>
					<uni-forms-item label=" " :labelWidth="30" name="confirmPassword" class="formItemBox">
						<!-- i18n.ctwfont65 -->
						<template #left>
							<uni-icons size="24" type="locked-filled" style="padding-left: 5px;" color="#F77687" />
						</template>
						<input
							type="text"
							:maxlength="28"
							:password="YXeyeShow"
							class="classInput"
							:placeholder="i18n.ctwfont66"
							v-model="formList.confirmPassword"
							@input="binddata('confirmPassword', $event.detail.value)"
						/>
						<uni-icons v-show="formList.confirmPassword" @tap="YXeyeopen" class="nameIcon2" color="#9e9fa0" :type="YXeye" size="14" />
					</uni-forms-item>
					<!-- 手机号 -->
					<uni-forms-item :labelWidth="30" name="phone" class="formItemBox">
						<!-- label=" " -->
						<!-- i18n.ctwfont26 -->
						<!-- 			<template #left>
							<uni-icons size="24" type="phone-filled" style="padding-left: 5px;" color="#F77687" />
						</template> -->
						<view style="position: relative;">
							<picker class="pickerBox" @change="bindPickerChange" :value="index" :range="array">
								<view class="pickerBoxImg"><image style="width: 100%; height: 100%;" mode="scaleToFill" :src="arrayimg[index]"></image></view>
							</picker>
							<input
								style="padding-left: 38px;"
								type="number"
								:maxlength="11"
								class="classInput"
								:placeholder="i18n.ctwfont10"
								v-model="formList.phone"
								@input="binddata('phone', $event.detail.value)"
							/>
						</view>
					</uni-forms-item>
					<!-- 验证码 -->
					<uni-forms-item name="code" style="background-color: rgba(0,0,0,0);">
						<view style="display: flex; align-items: center; justify-content: space-between;">
							<input
								type="number"
								:maxlength="4"
								class="classInputTwo"
								:placeholder="i18n.ctwfont11"
								v-model="formList.code"
								@input="binddata('code', $event.detail.value)"
							/>
							<button @tap="getyouxianNum" :disabled="canClick" :class="canClick ? 'phonebtn2' : 'phonebtn'" type="default">{{ contents }}</button>
						</view>
					</uni-forms-item>
					<view class="submitBtn">
						<!-- loading -->
						<button size="mini" @tap="gaoback" class="submitBtnL" type="default">{{ i18n.ctwfont13 }}</button>
						<button size="mini" class="submitBtnR" @tap="FormSubmit" type="default">{{ i18n.ctwfont6 }}</button>
					</view>
				</uni-forms>
			</view>
		</view>

		<!-- 密码修改成功 -->
		<uni-popup ref="loginPopupOk3" type="center" :animation="false" :maskClick="false">
			<view class="loginBox" @tap="goHomeBtn">
				<view class="imgBox"><image style="width: 100px; height: 100px;" mode="scaleToFill" src="/static/icon/superAnt/Warning-0801.png"></image></view>
				<view>{{ i18n.ctwfont67 }}</view>
				<view>{{ i18n.ctwfont68 }}</view>
			</view>
		</uni-popup>
		<!-- 设置 -->
		<uni-popup ref="SetUpPopup" type="center" :animation="false"><set-up-pages ref="showPopup" @closePopUp="closePopUp" /></uni-popup>
		<!-- 退出 -->
		<sign-out ref="signOutBox" />
	</view>
</template>

<script>
import setUpPages from '@/pages/setUpPages/index.vue';
import signOut from '@/pages/setUpPages/signOut.vue'; // 退出登录
import LanguageConfig from '@/i18n/LanguageConfig';
import { setStorage, getStorage } from '@/utils/setStorage.js';
import { codeMapFun } from '@/utils/codeMap.js';
import { loadFontFace } from '@/utils/loadFontFaceBox.js';
import baseFont from '@/utils/baseFont.js';
export default {
	extends: baseFont,
	data: function() {
		return {
			topBarHeight: 0, // 导航栏高度
			YXeye: 'eye-slash',
			YXeyeShow: true,
			secondNum: 300,
			contents: this.$t('login').ctwfont86,
			canClick: false,
			popupIsShow: false, // 打开设置的标识
			signOutShow: false, // 退出登录
			clock: '',
			index: 0, // 国旗
			goSetTime: null, // 自动跳转
			formList: {
				phone: '', // 手机号
				code: '', // 验证码
				password: '', // 密码
				confirmPassword: '' // 确定密码
			},
			langShow: true, // 切换语言时校验更新
			arrayimg: ['/static/icon/china.png', '/static/icon/thailand.png', '/static/icon/vietnam.png']
		};
	},
	onLoad() {
		// 拦截物理返回键
		this.goBackBox();
	},
	onUnload() {
		uni.$off('goBack_k', this.goBackBox2);
	},
	onShow() {
		const languageFlag = getStorage('language') || 'th';
		if (languageFlag === 'zh') {
			this.index = 0;
		} else if (languageFlag === 'th') {
			this.index = 1;
		} else {
			this.index = 2;
		}
	},
	created() {
		const that = this;
		uni.getSystemInfo({
			success(res) {
				that.topBarHeight = res.statusBarHeight;
			}
		});
	},
	mounted() {},
	computed: {
		topBar() {
			let num = 0;
			num = this.topBarHeight + 64; // 44是顶部高度
			return num + 'px';
		},
		i18n() {
			return this.$t('login');
		},
		array() {
			return [`${this.$t('login').ctwfont87}-86`, `${this.$t('login').ctwfont90}-66`, `${this.$t('login').ctwfont88}-84`];
		},
		// 校验
		rules() {
			return {
				// 手机号
				phone: {
					rules: [
						{ required: true, errorMessage: this.$t('login').ctwfont104, trigger: 'blur' },
						{
							validateFunction: this.mobileValidateFunction
						}
					]
				},
				// 商品名称
				code: {
					rules: [{ required: true, errorMessage: this.$t('login').ctwfont129, trigger: 'blur' }]
				},
				// 密码
				password: {
					rules: [
						{ required: true, errorMessage: this.$t('login').ctwfont122, trigger: 'blur' },
						{ minLength: 6, maxLength: 28, errorMessage: this.$t('login').ctwfont125, trigger: 'blur' },
						{
							validateFunction: this.passwordValidateFunction2
						}
						// { pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,28}$/, errorMessage: '请输入正确的密码', trigger: 'blur' }
					]
				},
				// 确定密码
				confirmPassword: {
					rules: [
						{ required: true, errorMessage: this.$t('login').ctwfont130, trigger: 'blur' },
						{ minLength: 6, maxLength: 28, errorMessage: this.$t('login').ctwfont125, trigger: 'blur' },
						// { pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,28}$/, errorMessage: '请输入正确的密码', trigger: 'blur' },
						{
							validateFunction: this.passwordValidateFunction
						}
					]
				}
			};
		}
	},
	components: { setUpPages, signOut },
	methods: {
		// 回退
		gaoback() {
			// #ifdef APP-PLUS
			uni.redirectTo({
				url: `/pages/home/index`
			});
			// #endif
			// #ifdef H5
			this.$Router.push(`/pages/home/index`);
			// #endif
		},
		goBackBox() {
			// const that = this;
			uni.$on('goBack_k', this.goBackBox2);
		},
		goBackBox2(data) {
			if (data) {
				this.gaoback();
			}
		},
		FormSubmit() {
			this.$refs.form
				.validate()
				.then(async val => {
					const { phone, code, password, confirmPassword } = this.formList;
					let code2 = '';
					if (this.index === 0) {
						code2 = '86';
					} else if (this.index === 1) {
						code2 = '66';
					} else {
						code2 = '84';
					}
					const params = {
						phone,
						code,
						password,
						confirmPassword,
						areaCode: code2
					};
					const { data: res } = await this.$http(true, 'api/user/resetPassword/phone', params, 'POST');
					if (res.errno === 0) {
						this.$refs.loginPopupOk3.open();
						this.goSetTime = setTimeout(() => {
							this.$refs.loginPopupOk3.close();
							// #ifdef APP-PLUS
							uni.redirectTo({
								url: '/pages/home/index'
							});
							// #endif
							// #ifdef H5
							this.$Router.push('/pages/home/index');
							// #endif
						}, 2000);
					} else {
						const err = codeMapFun().find(item => item[res.errno]);
						if (err) {
							uni.showToast({
								title: err[res.errno],
								icon: 'none',
								position: 'top'
							});
						} else {
							uni.showToast({
								title: res.errmsg,
								icon: 'none',
								position: 'top'
							});
						}
						// uni.showToast({
						// 	title: res.data.customerCodeName,
						// 	icon: 'none',
						// 	position: 'top'
						// });
					}
				})
				.catch(err => {
					uni.showToast({
						title: 'Please fill in the correct information',
						icon: 'none',
						position: 'top'
					});
				});
		},
		// 眼睛
		YXeyeopen() {
			this.YXeyeShow = !this.YXeyeShow;
			if (this.YXeyeShow) {
				this.YXeye = 'eye-slash';
			} else {
				this.YXeye = 'eye';
			}
		},
		// 手机校验
		mobileValidateFunction(rule, value, data, callback) {
			if (this.index === 0) {
				var re = new RegExp(/^1(3|4|5|6|7|8|9)\d{9}$/);
				if (re.test(value)) {
					return true;
				} else {
					callback(this.$t('login').ctwfont114);
				}
			} else if (this.index === 1) {
				return true;
			} else {
				return true;
			}
			// if (value !== this.formList3.password) {
			// 	callback('密码不一致');
			// }
		},
		// 密码异步校验
		passwordValidateFunction(rule, value, data, callback) {
			if (value !== this.formList.password) {
				callback(this.$t('login').ctwfont121);
			} else {
				this.$refs.form.setValue('password', value);
			}
			return true;
		},
		// 密码异步校验
		passwordValidateFunction2(rule, value, data, callback) {
			if (this.formList.confirmPassword) {
				if (value !== this.formList.confirmPassword) {
					callback(this.$t('login').ctwfont121);
				} else {
					this.$refs.form.setValue('confirmPassword', value);
				}
			}
			return true;
		},
		// 选择国籍
		bindPickerChange(val) {
			this.langShow = false;
			let lang = 'th';
			this.index = val.target.value;
			if (this.index === 0) {
				lang = 'zh';
			} else if (this.index === 1) {
				lang = 'th';
			} else {
				lang = 'en';
			}
			LanguageConfig.isExist(lang);
			this.$i18n.locale = lang;
			setStorage('language', lang);
			this.$refs.form.resetFields();
			this.$nextTick(function() {
				loadFontFace();
				this.langShow = true;
				this.erificationOptimization();
			});
		},
		// 切换后校验优化
		erificationOptimization() {
			setTimeout(() => {
				this.formList.phone ? this.$refs.form.setValue('phone', this.formList.phone) : '';
				this.formList.code ? this.$refs.form.setValue('code', this.formList.code) : '';
				this.formList.password ? this.$refs.form.setValue('password', this.formList.password) : '';
				this.formList.confirmPassword ? this.$refs.form.setValue('confirmPassword', this.formList.confirmPassword) : '';
			}, 200);
		},
		// 获取短信验证码
		async getyouxianNum() {
			const { phone } = this.formList;
			if (phone) {
				let code = '';
				this.canClick = true;
				if (this.index === 0) {
					code = '86';
				} else if (this.index === 1) {
					code = '66';
				} else {
					code = '84';
				}
				const params = {
					mobile: phone,
					areaCode: code
				};
				// 第一个参数url, 第二个参数请求数据, 第三个请求方式
				const { data: res } = await this.$http(true, 'api/user/resetPassword/sendMessage', params, 'GET');
				if (res.errno === 0) {
					// this.canClick = true;
					this.contents = this.secondNum + this.$t('login').ctwfont85;
					this.clock = setInterval(() => {
						this.secondNum--;
						this.contents = this.secondNum + this.$t('login').ctwfont85;
						if (this.secondNum < 1) {
							// 当倒计时小于0时清除定时器
							clearInterval(this.clock);
							this.contents = this.$t('login').ctwfont86;
							this.secondNum = 300;
							this.canClick = false;
							this.clearCodeNum(params);
						}
					}, 1000);
				} else {
					this.canClick = false;
					const err = codeMapFun().find(item => item[res.errno]);
					if (err) {
						uni.showToast({
							title: err[res.errno],
							icon: 'none',
							position: 'top'
						});
					} else {
						uni.showToast({
							title: res.errmsg,
							icon: 'none',
							position: 'top'
						});
					}
				}
			} else {
				this.$refs.form.setValue('phone', phone);
			}
		},
		// 60秒后清楚验证吗
		async clearCodeNum(item) {
			const params = {
				mobile: item.mobile,
				function: 'RESET_PASSWORD'
			};
			// 第一个参数url, 第二个参数请求数据, 第三个请求方式
			await this.$http(true, 'api/user/verificationCode/clear', params, 'GET');
		},
		// 关闭注册成功弹框
		goHomeBtn() {
			// 关闭自动跳转
			clearTimeout(this.goSetTime);
			this.$refs.loginPopupOk3.close();
			// #ifdef APP-PLUS
			uni.redirectTo({
				url: '/pages/home/index'
			});
			// #endif
			// #ifdef H5
			this.$Router.push('/pages/home/index');
			// #endif
		},
		// 打开设置
		showSetUp() {
			this.$refs.SetUpPopup.open('right');
			this.popupIsShow = true;
		},
		// 关闭设置
		closePopUp(val) {
			this.langShow = false;
			if (val) {
				this.$refs.SetUpPopup.close();
				this.popupIsShow = false;
			} else {
				this.$refs.SetUpPopup.close();
				this.popupIsShow = false;
				this.$refs.signOutBox.open();
				this.signOutShow = true;
			}
			const languageFlag = getStorage('language') || 'th';
			if (languageFlag === 'zh') {
				this.index = 0;
			} else if (languageFlag === 'th') {
				this.index = 1;
			} else {
				this.index = 2;
			}
			this.$refs.form.resetFields();
			this.$nextTick(function() {
				this.langShow = true;
				this.erificationOptimization();
				this.contents = this.$t('login').ctwfont86;
			});
		}
	}
};
</script>

<style lang="scss" scoped>
// 多行文本
::v-deep .uni-easyinput__content-textarea {
	min-height: 50px;
	height: 50px;
}
// formItem
::v-deep .uni-forms-item {
	margin-bottom: 19px;
}
::v-deep uni-button:after {
	border: none;
}
::v-deep .uni-error-message {
	width: 80%;
}
.loginBox {
	width: 700rpx;
	height: 150px;
	text-align: center;
	font-size: 16px;
	color: #fff;
	.imgBox {
		display: flex;
		justify-content: center;
		padding: 20px;
	}
}
.modifyMMBox {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	// background-color: rgba(0, 0, 0, 0.7);
	background-color: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(5rpx);
	z-index: 1;
	overflow: hidden;
	.topBox {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
		// 顶部部分
		.status_bar {
			height: var(--status-bar-height);
			// background-color: #f1f1f1;
			width: 100%;
		}
		.leftIconBox {
			width: 25px;
			height: 25px;
			background-color: #fff;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-left: 15px;
		}
	}
	.pickerBox {
		position: absolute;
		z-index: 10;
		left: 5px;
		top: 6px;
		.pickerBoxImg {
			width: 30px;
			height: 28px;
		}
	}
	.zhuti {
		.titleBox {
			margin-bottom: 5px;
			display: flex;
			justify-content: center;
			.titleBoxcenter {
				height: 60px;
				line-height: 60px;
				font-size: 32px;
				color: #fff;
				border-radius: 5px;
				text-align: center;
			}
		}
		.tishiTitle {
			text-align: center;
			font-size: $uni-font-size-custom-e;
			color: #fff;
			margin-bottom: 10px;
		}
		.phonebtn {
			font-size: $uni-font-size-custom-g;
			background-color: #d80c24;
			border: 2px solid #bb3242;
			height: 40px;
			line-height: 40px;
			padding: 0 10px;
			border-radius: 20px;
			color: #ffffff;
			margin-left: 10px;
		}
		.phonebtn2 {
			font-size: $uni-font-size-custom-g;
			background-color: #ccc;
			border: 2px solid #ccc;
			height: 40px;
			line-height: 40px;
			padding: 0 10px;
			border-radius: 20px;
			color: #7d7d7d;
			margin-left: 10px;
		}
		.formItemBox {
			border: 2px solid #a8a8a8;
			border-radius: 20px;
			.classInput {
				position: relative;
				height: 40px;
				color: #9e9fa0;
				padding: 0 5px;
				font-size: $uni-font-size-custom-g;
			}
			.nameIcon2 {
				position: absolute;
				right: 10px;
				top: 8px;
			}
		}
		.classInputTwo {
			width: 65%;
			height: 40px;
			color: #9e9fa0;
			padding: 0 5px;
			background-color: #fff;
			font-size: $uni-font-size-custom-g;
			border: 2px solid #a8a8a8;
			border-radius: 20px;
		}
		.submitBtn {
			margin-top: 300rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.submitBtnR {
				background-color: #cd001b;
				padding: 0 20px;
				height: 30px;
				line-height: 30px;
				border-radius: 20px;
				color: #ffffff;
				margin: 0;
			}
			.submitBtnL {
				background-color: #cbcbcb;
				padding: 0 20px;
				height: 30px;
				line-height: 30px;
				border-radius: 20px;
				color: #ffffff;
				margin: 0;
			}
		}
	}
}
</style>
